import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import ECharts from '@kuiper-components/echarts';

import s from './style.module.css';

const numFormat = function (num) {
	try {
		return new Intl.NumberFormat('en-US').format(num);
	} catch {
		return num.toLocaleString('en-US');
	}
};

const COLOR_MAP = {
	vul: '#FAAF2C',
	ssl: '#F04038',
};
function HolesTotal({ className, vulWarningCount, sslWarningCount }) {
	const total = vulWarningCount + sslWarningCount;
	const option = {
		tooltip: {
			trigger: 'item',
			formatter({ name, percent }) {
				return `<div style="display:flex;padding:0.5rem;color: var(--color-text)">
									<div style="padding-right: 0.25rem">${name}:</div>
									<div>${percent}%</div>
								</div>`;
			},
			backgroundColor: '#fff',
			textStyle: {
				color: '#696969',
				fontSize: 12,
			},
		},
		legend: {
			show: false,
			orient: 'vertical',
			right: 20,
			icon: 'circle',
			pageIconSize: 8,
			textStyle: {
				color: '#696969',
			},
		},
		series: [
			{
				center: ['50%', '50%'],
				name: '漏洞数',
				type: 'pie',
				radius: ['65%', '90%'],
				hoverOffset: 5,
				avoidLabelOverlap: false,
				label: {
					normal: { show: false, position: 'center' },
					emphasis: {
						show: false,
						fontSize: 14,
						formatter: '{b}\n{d}%',
					},
				},
				emphasis: {
					label: {
						show: false,
						fontSize: '30',
						fontWeight: 'bold',
					},
				},
				labelLine: {
					show: false,
				},
				data: [
					{
						name: 'Web漏洞数',
						value: vulWarningCount,
						itemStyle: { color: COLOR_MAP.vul },
					},
					{
						name: 'SSL漏洞数',
						value: sslWarningCount,
						itemStyle: {
							color: COLOR_MAP.ssl,
						},
					},
					{
						name: '主机漏洞数',
						value: sslWarningCount,
						itemStyle: {
							color: COLOR_MAP.ssl,
						},
					},
				],
			},
		],
	};

	const countMap = {
		Web漏洞数: numFormat(vulWarningCount),
		SSL漏洞数: numFormat(sslWarningCount),
	};

	option.legend.formatter = name => {
		return `${name} ${countMap[name]}`;
	};

	return (
		<div className={cn(className, s.holesTotal)}>
			<div className={s.title}>
				<span className={s.text}>漏洞数</span>
				<span className={s.num}>{numFormat(total)}</span>
			</div>
			<div className={s.content}>
				<ECharts option={option} className={s.left} />
				<div className={s.right}>
					<div className={s.text}>
						<span
							className={s.circle}
							style={{ backgroundColor: COLOR_MAP.vul }}
						/>
						Web漏洞数
					</div>
					<div className={s.num}>{countMap.Web漏洞数}</div>
					<div className={s.text}>
						<span
							className={s.circle}
							style={{ backgroundColor: COLOR_MAP.ssl }}
						/>
						SSL漏洞数
					</div>
					<div className={s.num}>{countMap.SSL漏洞数}</div>
					<div className={s.text}>
						<span
							className={s.circle}
							style={{ backgroundColor: COLOR_MAP.ssl }}
						/>
						主机漏洞数
					</div>
					<div className={s.num}>{countMap.SSL漏洞数}</div>
				</div>
			</div>
		</div>
	);
}

HolesTotal.propTypes = {
	className: PropTypes.string,
	sslWarningCount: PropTypes.number,
	vulWarningCount: PropTypes.number,
};
HolesTotal.defaultProps = {
	className: '',
};

export default HolesTotal;
